import React from "react";
import {
    Swiper,
    Image,
    NoticeBar,
    Button,
    Search,
} from "react-vant";
import "../sass/home.scss";
import { images } from "./images";
import "../sass/images.scss";
import { VolumeO } from "@react-vant/icons";
import Product from "../components/Product";
import { useEffect, useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

function Home() {
    let [value, setValue] = useState("");
    let [dataProduct, setdataProduct] = useState([]);
    let navigate = useNavigate();
    let getdata = () => {
        //typeValue: 商品类型
        axios({
            method: "get",
            url: "/typeProducts",
            params: {
                key: "isHot",
                value: 1,
            },
        })
            .then((res) => {
                if (res.data.code === 500) {
                    setdataProduct(res.data.result);
                }
            })
            .catch((err) => {});
    };
    useEffect(() => {
        getdata();
    }, []);

    return (
        <div className="home">
            <div className="d-x-ke">
                <div className="d-x-z">小可爱们好</div>
                <div
                    className="d-x-d"
                    onClick={() => {
                        navigate("/login");
                    }}
                >
                    登录
                </div>
                <div
                    className="sou"
                    onClick={() => {
                        navigate("/sousuo");
                    }}
                >
                    <Search
                        shape="round"
                        value={value}
                        onChange={setValue}
                        placeholder="请输入搜索关键词"
                        onSearch={(val) => {
                            Toast(val);
                            setValue(val);
                        }}
                    />
                </div>
            </div>
            <div className="demo-swiper">
                <Swiper autoplay={5000}>
                    {images.map((image) => (
                        <Swiper.Item key={image}>
                            <Image lazyload src={image} />
                        </Swiper.Item>
                    ))}
                </Swiper>
            </div>
            <div className="gao">
                <NoticeBar
                    leftIcon={<VolumeO />}
                    text="瑞幸奶茶新品推出啦,欢迎购买,幸运顾客享有优惠
      。"
                />
            </div>
            <div className="tiao">
                <div className="one">今日热卖</div>
                <div className="two">
                    <div className="demo-button">
                        <Button round type="danger">
                            More
                        </Button>
                    </div>
                </div>
            </div>
            <div className="remai">
                <div className="maipro">
                    {dataProduct.map((item, index) => {
                        return (
                            <div
                                className="product-item"
                                key={index}
                                onClick={() => {
                                    navigate(
                                        `/detail/${item.pid}`
                                    );
                                }}
                            >
                                <Product
                                    pro={item}
                                ></Product>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

export default Home;
